<template>
  <div class="video-js vjs-big-play-centered" style="width: 100%;height: 300px;">
    <video id="videoNode1" className="video-js" webkit-playsinline="true" playsinline="true"></video>
  </div>
</template>
<script>
import videojs from "video.js";
export default {
  name: 'videoPlay',
  props: {
    videoSrc: {
      type: String,
      default: '',
    },
    videoPoster: {
      type: String,
      default: '',
    },
    getDuration: {
      type: Function,
      default: function () { },
    },
    videoDestroy: {
      type: Function,
      default: function () { },
    },
    playHandler: {
      type: Function,
      default: function () { },
    },
    pauseHandler: {
      type: Function,
      default: function () { },
    },
    userOnlineTime: {
      type: Function,
      default: function () { },
    },
    isAutoPlay: {
      type: Boolean,
      default: true,
    },
    onOff: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      firstPlay: true,
      currentTime: 0,
      option: {
        autoplay: true,
        controls: true,
        preload: 'auto',
        sources: [],
        poster: '',
        controlBar: {
          'currentTimeDisplay': true,
          'timeDivider': true,
          'durationDisplay': true,
          'remainingTimeDisplay': false,
          children: [
            { name: 'playToggle' }, // 播放按钮
            { name: 'currentTimeDisplay' }, // 当前已播放时间
            { name: 'progressControl' }, // 播放进度条
            { name: 'durationDisplay' }, // 总时间
            {
              name: 'volumePanel', // 音量控制
              inline: false, // 不使用水平方式
            },
            // {name: 'FullscreenToggle'} // 全屏
          ]
        },
      },
    };
  },
  watch: {
    videoSrc(newVal, oldVal) {
      if (newVal && newVal != oldVal) {
        this.setVideo();
      }
    },
    onOff(val) {
      if (val) {
        this.videoPlayMethod();
      } else {
        this.videoPauseMethod();
      }
    }
  },
  mounted() {
    if (this.videoSrc) {
      this.setVideo();
    }
  },
  methods: {
    setVideo() {
      if (!this.player1) {
        if (this.videoPoster) this.option.poster = this.videoPoster;
        this.option.sources = [{
          type: 'video/mp4',
          src: this.videoSrc
        }];
        setTimeout(() => { this.initPage(); }, 20);
      } else {
        if (this.videoPoster) this.player1.poster = this.videoPoster;
        this.player1.src(this.videoSrc);
        this.player1.load();
        if (this.isAutoPlay) {
          this.player1.play().catch(() => { });
        }
      }

    },
    initPage() {
      let that = this;
      this.player1 = videojs('videoNode1', this.option, function onPlayerReady() {
        if (that.isAutoPlay) {
          this.autoplay();
        }
        //可以开始监听
        if (typeof that.vodieReady == 'function') {
          that.vodieReady();
        }
      });
      this.player1.on('loadedmetadata', function () {
        if (typeof that.loadedmetadata == 'function') {
          that.loadedmetadata(that.player1.duration());
        }
      });
      //视频暂停
      this.player1.on('pause', function () {
        if (typeof that.pauseHandler == 'function') {
          that.pauseHandler(that.player1.duration());
        }
      });
      //视频播放结束
      this.player1.on("ended", function (e) {
        if (typeof that.endedHandler == 'function') {
          that.endedHandler();
        }
      });
      //监听时间变化
      this.player1.on("timeupdate", function (e) {
        if (that.firstPlay && that.userOnlineTime > 0) {
          that.player1.currentTime(Number(that.userOnlineTime));
          that.currentTime = that.userOnlineTime;
          that.firstPlay = false;
        }
        if (typeof that.getDuration == 'function') {
          that.getDuration(that.player1.currentTime());
        }
        that.timeupdateMethod(that.player1.currentTime());
      });
      //监听视频播放
      this.player1.on("play", function (e) {
        if (typeof that.playHandler == 'function') {
          that.playHandler();
        }
      });
    },
    //此方法用来监听是否快进
    timeupdateMethod(duration) {
      //如果向后退时间不报存
      if (duration > this.currentTime) {
        if (duration - this.currentTime > 10) {
          this.player1.currentTime(Number(this.currentTime));
          return;
        }
        this.currentTime = duration;
      }
    },
    //视频播放
    videoPlayMethod() {
      if (this.player1) {
        this.player1.play();
      }
    },
    //视频暂停
    videoPauseMethod() {
      if (this.player1) {
        this.player1.pause();
      }
    },
  },
  beforeDestroy() {
    if (this.player1) {
      this.player1.pause();
    }
  },
};
</script>
<style scoped>
.video-container {
  width: 100%;
  height: 100%;
}
</style>
